<!--
  * @Description: 企业信息编辑页面
  * @Author: [Your Name]
  * @Date: [Current Date]
  * @FilePath: /pages/user/firm/edit.vue
-->

<template>
  <view class="p-h24 firm-edit">
    <RcNavigation title="编辑企业信息" iconColor="white" color="#fff" bgColor="#1269FF" />

    <view class="card flex">
      <text class="flex-1 text-700-130">企业名称</text>
      <input v-model="formData.title" class="text-r" type="text" placeholder="请填写公司名称" />
    </view>

    <view class="card flex" @click="openBizNaturePicker(formData.nature_id)">
      <text class="flex-1 text-700-130">企业性质</text>
      <text v-if="formData.nature_id" class="text-400-128">{{
        getNatureName(formData.nature_id)
      }}</text>
      <text v-else class="text-400-428">请选择企业性质</text>
      <image class="square-30" src="@/static/images/public/arrow-3.png" />
    </view>

    <view class="card flex" @click="openScaleRangePicker(formData.guimo)">
      <text class="flex-1 text-700-130">企业规模</text>
      <text v-if="formData.guimo" class="text-400-128">{{
        getScaleRangeName(formData.guimo)
      }}</text>
      <text v-else class="text-400-428">请选择企业规模</text>
      <image class="square-30" src="@/static/images/public/arrow-3.png" />
    </view>

    <view class="card flex">
      <text class="flex-1 text-700-130">企业地址</text>
      <input v-model="formData.address" class="text-r" type="text" placeholder="请填写企业地址" />
    </view>

    <view class="card flex">
      <text class="flex-1 text-700-130">我的职务</text>
      <input v-model="formData.duties" class="text-r" type="text" placeholder="请填写职务" />
    </view>

    <!-- <view class="card flex">
      <text class="flex-1 text-700-130">我的邮箱</text>
      <input v-model="formData.email" class="text-r" type="text" placeholder="请填写接收简历邮箱" />
    </view> -->

    <view class="m-t40">
      <text class="text-700-130">上传企业营业执照</text>
      <view class="license flex-d-c m-t24" @click="clickUpload(1)">
        <template v-if="!formData.license">
          <image class="square-24" src="@/static/images/user/add.png" />
          <text class="m-t20 text-400-424">点击上传</text>
        </template>
        <image v-else class="w h" :src="formData.license" mode="aspectFill" />
      </view>
    </view>

    <view class="m-t40">
      <text class="text-700-130">企业简介</text>
      <textarea v-model="formData.intro" class="synopsis m-t24" placeholder="请输入企业简介"></textarea>
    </view>

    <view class="m-t40">
      <text class="text-700-130">企业照片</text>
      <view class="photo flex-d-c m-t24" @click="clickUpload(2)">
        <template v-if="!formData.images">
          <image class="square-24" src="@/static/images/user/add.png" />
          <text class="m-t20 text-400-424">点击上传</text>
        </template>
        <image v-else class="w h" :src="formData.images" mode="aspectFill" />
      </view>
    </view>

    <view class="flex-c p-b40 m-t40">
      <RcButton width="340" text="保存" @click="submit" />
    </view>

    <up-picker ref="bizNaturePickerRef" title="企业性质" keyName="name" :show="showBizNaturePicker"
      :columns="[bizNatureColumns]" @confirm="onBizNaturePickerConfirm" @cancel="closeBizNaturePicker" />

    <up-picker ref="scaleRangePickerRef" title="企业规模" keyName="name" :show="showScaleRangePicker"
      :columns="[scaleRangeColumns]" @confirm="onScaleRangePickerConfirm" @cancel="closeScaleRangePicker" />
  </view>
</template>

<script lang="ts" setup>
import RcNavigation from '@/components/navigation.vue'
import RcButton from "@/components/button.vue";

import { reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import type { UserData } from "@/types/api.d.ts";
import { useUserStore } from "@/stores/user";
import useUpload from "@/hooks/use-upload";
import { useBizNature, useScaleRange } from "./useBizNature";

const { userCompany, getUserInfo } = useUserStore();
const { chooseImage, uploadImage } = useUpload();

const {
  pickerRef: bizNaturePickerRef,
  columns: bizNatureColumns,
  show: showBizNaturePicker,
  open: openBizNaturePicker,
  close: closeBizNaturePicker,
  getSelectedName: getNatureName,
} = useBizNature();

const {
  pickerRef: scaleRangePickerRef,
  columns: scaleRangeColumns,
  show: showScaleRangePicker,
  open: openScaleRangePicker,
  close: closeScaleRangePicker,
  getSelectedName: getScaleRangeName,
} = useScaleRange();

// 表单数据
const formData = reactive({
  title: "",
  nature_id: 0,
  guimo: "",
  address: "",
  duties: "",
  email: "",
  license: "",
  intro: "",
  images: "",
});

// 加载企业数据
const loadCompanyData = async () => {
  Object.assign(formData, userCompany);
};

// 上传图片
const clickUpload = async (type: number) => {
  const { filePath, success, size } = await chooseImage();

  if (!success) return;

  // 限制文件大小为5MB
  if (size > 5 * 1024 * 1024) {
    uni.$u.toast("文件大小不能超过5MB");
    return;
  }

  uni.showLoading({ title: "上传中...", mask: true });

  const uploadResult = await uploadImage(filePath);

  uni.hideLoading();

  if (uploadResult.success) {
    if (type === 1) {
      formData.license = uploadResult.url;
    } else if (type === 2) {
      formData.images = uploadResult.url;
    }
  }
};

// 企业性质选择
const onBizNaturePickerConfirm = (e: any) => {
  const selected = e.value[0];
  formData.nature_id = selected.id;
  closeBizNaturePicker();
};

// 企业规模选择
const onScaleRangePickerConfirm = (e: any) => {
  const selected = e.value[0];
  formData.guimo = selected.id;
  closeScaleRangePicker();
};

// 表单验证
const validateForm = (): boolean => {

  if (formData.title === "") {
    uni.$u.toast("请输入企业名称");
    return false;
  }

  if (formData.nature_id === 0) {
    uni.$u.toast("请选择企业性质");
    return false;
  }

  if (formData.guimo === "") {
    uni.$u.toast("请选择企业规模");
    return false;
  }

  if (formData.address === "") {
    uni.$u.toast("请输入企业地址");
    return false;
  }

  if (formData.duties === "") {
    uni.$u.toast("请输入职务");
    return false;
  }

  // if (formData.email === "") {
  //   uni.$u.toast("请输入邮箱");
  //   return false;
  // }

  if (formData.license === "") {
    uni.$u.toast("请上传企业营业执照");
    return false;
  }

  if (formData.intro === "") {
    uni.$u.toast("请输入企业简介");
    return false;
  }

  if (formData.images === "") {
    uni.$u.toast("请上传企业照片");
    return false;
  }

  return true;
};

// 提交表单
const submit = async () => {
  if (!validateForm()) return;

  uni.showLoading({ title: "保存中...", mask: true });

  try {
    const res = await uni.$u.post<UserData>(
      "/company/saveCommpanyInfo",
      formData
    );

    if (res.code === 1) {
      uni.$u.toast("保存成功");
      getUserInfo();
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    } else {
      uni.$u.toast(res.msg || "保存失败");
    }
  } catch (error) {
    uni.$u.toast("网络错误");
  } finally {
    uni.hideLoading();
  }
};

onLoad(() => {
  loadCompanyData();
});
</script>

<style lang="scss" scoped>
.card {
  height: 110rpx;
  border-bottom: 1rpx solid $border-color-4;

  .text-r {
    text-align: right;
  }

  .square-30 {
    width: 30rpx;
    height: 30rpx;
  }
}

.synopsis {
  width: 100%;
  height: 314rpx;
  padding: 20rpx;
  border-radius: 6rpx;
  background: #f9f9f9;
  border: 1rpx solid #cccccc;
}

.license,
.photo {
  width: 300rpx;
  height: 200rpx;
  background: #f9f9f9;
  border-radius: 6rpx;
  border: 1rpx solid #cccccc;
  overflow: hidden;
}

.text-700-130 {
  font-weight: 700;
  color: $text-color-1;
  font-size: 30rpx;
}

.text-400-128 {
  color: $text-color-1;
  font-size: 28rpx;
}

.text-400-428 {
  color: $text-color-4;
  font-size: 28rpx;
}

.text-400-424 {
  color: $text-color-4;
  font-size: 24rpx;
}

.square-24 {
  width: 24rpx;
  height: 24rpx;
}

.m-t20 {
  margin-top: 20rpx;
}

.m-t24 {
  margin-top: 24rpx;
}

.m-t40 {
  margin-top: 40rpx;
}

.p-h24 {
  padding-left: 24rpx;
  padding-right: 24rpx;
}

.p-b40 {
  padding-bottom: 40rpx;
}

.flex {
  display: flex;
  align-items: center;
}

.flex-d-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-c {
  display: flex;
  justify-content: center;
}

.flex-1 {
  flex: 1;
}
</style>